<template>
  <el-form ref="wordSearchForm" :model="wordSearch" label-width="100px" :inline="true" size="small">
    <el-form-item label="中文" prop="zhWord">
      <el-input v-model="wordSearch.zhWord" placeholder="请输入中文"></el-input>
    </el-form-item>
    <el-form-item label="日文含汉字" prop="riWord">
      <el-input v-model="wordSearch.riWord" placeholder="请输入日文含汉字"></el-input>
    </el-form-item>
    <el-form-item label="日文假名" prop="riWordKana">
      <el-input v-model="wordSearch.riWordKana" placeholder="请输入日文假名"></el-input>
    </el-form-item>
    <el-form-item label="课程类型" prop="courseParentId">
        <el-select v-model="wordSearch.courseParentId" placeholder="请选择课程类型" @change="courseChangeEvent" >
            <el-option label="全部" value="ALL"/>
            <el-option v-for="item in parentCourseData" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
    </el-form-item>
    <el-form-item label="课程" prop="courseId">
        <el-select v-model="wordSearch.courseIds" multiple placeholder="请选择课程" :disabled="wordSearch.courseParentId == 'ALL'?true:false">
            <el-option v-for="item in childCourseData" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
    </el-form-item>
    <el-form-item label="单词所属标签" prop="wordTagIds">
        <el-select v-model="wordSearch.wordTagIds"  placeholder="单词所属标签">
            <el-option label="全部" value="ALL"/>
            <el-option label="名词" value="9"/>
            <el-option label="一类动词" value="1"/>
            <el-option label="二类动词" value="2"/>
            <el-option label="三类动词「动名词」" value="3"/>
            <el-option label="い形词" value="5"/>
            <el-option label="な形词" value="4"/>
            <el-option label="副词" value="8"/>
            <el-option label="名、副词" value="12"/>
            <el-option label="动、名、副" value="13"/>
            <el-option label="な形容词、副词" value="17"/>
            <el-option label="连体词" value="10"/>
            <el-option label="接续词" value="11"/>
            <el-option label="语法" value="6"/>
            <el-option label="寒暄语" value="7"/>
            <el-option label="指示词" value="14"/>
            <el-option label="疑问词" value="15"/>
            <el-option label="感叹词" value="16"/>
        </el-select>
    </el-form-item>
    <el-form-item class="btn">
      <el-button type="primary" icon="el-icon-search" @click="onSearch">搜索</el-button>
      <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    wordSearch: {
      type: Object,
      required: true,
    },
    //渲染主课程的数据
    parentCourseData :{
        type: Array,
        required: true
    },
    //渲染子课程的数据
    childCourseData :{
        type: Array,
        required: true
    }
  },
  methods:{
    onSearch(){
        this.$emit("onSearch");
    },
    reset(){
      this.$refs.wordSearchForm.resetFields();
    },
    //课程数据改变
    courseChangeEvent(v){
      this.$emit('updateCourseChange',v,'search')
    },
  },
  beforeDestroy(){
    this.$refs.wordSearchForm.resetFields();
  }
};
</script>

<style scoped lang="scss">
.el-button{
  padding-left: 25px;
  padding-right: 30px;
}
.btn{
  margin-left: 30px;
}
</style>
